<script setup lang="ts">
import {reactive, ref} from "vue";

const isActive = ref(true);
const hasError = ref(false);

const activeClass = ref('active')
const errorClass = ref('text-danger')

const activeColor = ref('red')
const fontSize = ref(30)

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})
</script>

<template>
  <div>
    <h1>Class 与 Style 绑定</h1>
    <p>数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。<br/>
      因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。<br/>
      但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。<br/>
      因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。<br/>
      除了字符串外，表达式的值也可以是对象或数组。</p>
    <div>
      <h2>绑定 HTML class</h2>
      <div :class="{ active: isActive }">
        <span>This text should be red if active is true.</span>
        <button @click="isActive =!isActive">Toggle active</button>
      </div>
      <div
          class="static"
          :class="{ active: isActive, 'text-danger': hasError }"
      >
        <span>This text should be red and blue if active is true and hasError is false.</span>
      </div>
    </div>
    <div :class="[activeClass, errorClass]"></div>
    <div :class="[isActive ? activeClass : '', errorClass]"></div>
    <div :class="[{ activeClass: isActive }, errorClass]"></div>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">这是一个测试</div>
    <div :style="{ 'font-size': fontSize + 'px' }">尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性
      key (对应其 CSS 中的实际名称)
    </div>
    <div :style="styleObject">直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁</div>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">你可以对一个样式属性提供多个 (不同前缀的) 值</div>
  </div>
</template>

<style scoped>
.active {
  color: red;
}

.static {
  color: blue;
}

.activeClass {

}
</style>